<template>
  <view class="shareFriends" v-show="isShow">
    <view class="shareFriends-box">
      <view class="title">
        <view class="icon">
          <image :src="image_host+'icon_chenggongfenxiang.png'"></image>
        </view>
        <text>发布成功，您可以分享到</text>
      </view>
      <view class="buttons">
        <button open-type="share" @click="showShare">
          <image :src="image_host+'icon_haoyou.png'"></image>
          <text>微信</text>
        </button>
        <!--        <button @click="showShare" open-type="share">-->
        <!--          <image :src="image_host+'icon_pengyouqan.png'"></image>-->
        <!--          <text>朋友圈</text>-->
        <!--        </button>-->
      </view>
      <view class="date-time">{{ time }}s后消失</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      image_host: this.image_host + 'quanzi/',
      isShow: false,
      time: 5,
      timeObj: {},
      info: {}
    };
  },
  methods: {
    async show(id) {
      await this.getDetails(id)
      this.isShow = true
      this.init()
    },
    hide() {
      this.isShow = false
    },
    init() {
      this.timeObj = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          clearInterval(this.timeObj)
          this.hide()
        }
      }, 1000)
    },
    getDetails(id) {
      return new Promise(async (resolve, reject) => {
        let res = await this.$javaCircle.doRequest("get", "circle/customer/say/saySomethingInfo?id=" + id, {});
        this.info = res.data.data
        resolve(true)
      })
    },
    showShare() {
      this.$emit('setTopicInfo', this.info)
      this.$javaCircle.doRequest("get", 'circle/customer/say/saySomethingShare', {id: this.info.id}, 'json', false)
    },
  },
}
</script>

<style lang="scss">
.shareFriends {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
  top: 0;
  left: 0;
  z-index: 10;
}

.shareFriends-box {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30upx 30upx 16upx 30upx;

  .title {
    width: 100%;
    display: flex;
    align-content: center;
    font-size: 45upx;
    color: #333333;

    .icon {
      width: 46upx;
      height: 46upx;
      margin-right: 11upx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .buttons {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 40upx 0 0upx 0;

    button {
      width: 134upx;
      display: flex;
      flex-direction: column;
      align-content: center;
      font-size: 40upx;
      color: #666666;

      image {
        width: 134upx;
        height: 134upx;
      }
    }
  }

  .date-time {
    font-size: 36upx;
    color: #FAC252;
    text-align: end;
  }
}

button {
  margin: 0;
  padding: 0;
  background-color: inherit;
  position: static;
}

button:after {
  content: none;
}

button::after {
  border: none;
}
</style>
